<template>
	<div class="others">
		<div class="hot_box">
			<div class="hot_l"><span class="iconfont">&#xe68b;</span>定位失败</div>
			<div class="hot_r"><span class="iconfont">&#xe649;</span>必游榜单</div>
		</div>
		<div class="line"></div>
		<!--本周热门榜单-->
		<div class="week_hot">
			<div class="left"><span class="iconfont">&#xe601;</span>本周热门榜单</div>
			<div class="right">全部榜单  > </div>
		</div>
		<div class="current_week">
			<ul class="list" v-for="item in liData">
				<li>
					<img :src="item.url"/>
					<p>{{item.txt}}</p>
					<p class="price">{{item.price}}<span class="content">起</span></p>
				</li>
			</ul>
		</div>
		<div class="line"></div>
		<div class="youLike">
			<span class="iconfont">&#xe601;</span>
			<span>猜你喜欢</span>
		</div>
		<div class="likeContent" v-for="(item,index) in likeData" :key="item.id">
			<div class="left"><img :src="item.url"/></div>
			<div class="right">
				<div>{{item.name}}</div>
				<div>
					<span class="star iconfont">&#xe600;&#xe600;&#xe600;&#xe600;&#xe600;</span>
					<span class="comment">{{item.num}}条评论</span>
				</div>
				<div class="box">
					<p>
						<span class="span1"><span class="symbol">￥</span>{{item.price}}</span>
						<span class="span2">起</span>
					</p>
					<p>{{item.address}}</p>
				</div>
				<div v-show="item.text.length>0">{{item.text}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Other",
		props:{
			liData:Array,
			likeData:Array
		},
		data(){
			return {
//				"liData":[
//				{"id":"001","url":"https://imgs.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",txt:"故宫",price:"￥40元"},
//				{"id":"002","url":"https://imgs.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg",txt:"八达岭长城",price:"￥35元"},
//				{"id":"003","url":"https://imgs.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg",txt:"圆明园",price:"￥25元"},
//				{"id":"004","url":"https://imgs.qunarzz.com/sight/p0/1505/d2/d274c92de14c93da.water.jpg_250x250_d852635b.jpg",txt:"颐和园",price:"￥23.5元"},
//				{"id":"005","url":"https://imgs.qunarzz.com/sight/p0/201403/07/a3231208ca4095bef77068c202d95bd2.jpg_250x250_6fea594a.jpg",txt:"香山公园",price:"￥9.9元"},
//				{"id":"006","url":"https://imgs.qunarzz.com/sight/p0/1603/85/85c883189bf7293390.water.jpg_250x250_090a42b6.jpg",txt:"什刹海",price:"￥5元"},
//				{"id":"007","url":"https://imgs.qunarzz.com/sight/p0/1708/2b/2b6378fd3b2e1d86a3.img.jpg_250x250_b256890e.jpg",txt:"慕田峪长城",price:"￥39元"},
//				{"id":"008","url":"https://imgs.qunarzz.com/sight/p0/1602/92/920e47352552c1c990.water.jpg_250x250_ee99c18e.jpg",txt:"天坛公园",price:"13.5元"}
//			],
//				"likeData":[
//					{"id":"001",
//					"name":"故宫",
//					"num":563403,
//					"price":40,
//					"address":"东城区",
//					"text":"世界五大宫之首,穿越与您尽在咫尺",
//					"url":"https://imgs.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg"
//				},
//				{"id":"002",
//					"name":"八达岭长城",
//					"num":96451,
//					"price":35,
//					"address":"延庆县",
//					"text":"不到长城非好汉",
//					"url":"https://imgs.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_200x200_2458ffb2.jpg"
//				},
//				{"id":"003",
//					"name":"北京欢乐谷",
//					"num":82844,
//					"price":145,
//					"address":"朝阳区",
//					"text":"亚洲唯一飞行式山车等你来挑战",
//					"url":"https://imgs.qunarzz.com/sight/p0/1911/29/29d9b9078000774fa3.img.jpg_200x200_3621a35a.jpg"
//				},
//				{"id":"004",
//					"name":"北京野生动物园",
//					"num":30852,
//					"price":122,
//					"address":"大兴区",
//					"text":"敢于森林之王近距离接触吗?",
//					"url":"https://imgs.qunarzz.com/sight/p0/1507/cc/19733fc0135062788140cbb48ae606a7.water.jpg_200x200_d9ebe2fd.jpg"
//				},
//				{"id":"005",
//					"name":"古北水镇",
//					"num":14713,
//					"price":140,
//					"address":"密云县",
//					"text":"走进那个画中的小镇",
//					"url":"https://imgs.qunarzz.com/sight/p0/1903/5d/5dcaf453dfd6f5dba3.img.jpg_200x200_51d03f19.jpg"
//				},
//				{"id":"006",
//					"name":"南宫温泉水世界",
//					"num":2527,
//					"price":57,
//					"address":"西城区",
//					"text":"",
//					"url":"https://imgs.qunarzz.com/sight/p0/1503/dc/dc651cd2e01fb900.img.jpg_200x200_04f5b7b7.jpg"
//				},
//				{"id":"007",
//					"name":"北京海洋馆",
//					"num":9502,
//					"price":170,
//					"address":"西城区",
//					"text":"奇幻海洋之旅",
//					"url":"https://imgs.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_200x200_ce3d2658.jpg"
//				},
//				{"id":"008",
//					"name":"恭王府",
//					"num":48338,
//					"price":40,
//					"address":"西城区",
//					"text":"一座恭王府，半部清代史",
//					"url":"https://imgs.qunarzz.com/sight/p0/201405/12/51b63883c25f5d87af3c08bb016e2bd7.jpg_200x200_8eb33f07.jpg"
//				},
//				{"id":"009",
//					"name":"富国海底世界",
//					"num":4968,
//					"price":79,
//					"address":"朝阳区",
//					"text":"",
//					"url":"https://imgs.qunarzz.com/sight/p0/1505/74/749086a3617afc8c.water.jpg_200x200_570c5ffb.jpg"
//				}
//				]
			}
			
		}
	}
</script>

<style lang="stylus" scoped>
	.hot_box{
		display:flex;
		text-align:center;
		color:#212121;
		font-size:0.14rem;
		border-bottom:1px solid #eaeaea;
	}
	.hot_box div{
		width:50%;
		line-height:0.5rem;
	}
	.hot_l{
		border-right:1px solid #eaeaea;
	}
	.line{
		width:100%;
		height:0.07rem;
		background:#eaeaea;
	}
	/*本周热门榜单*/
	.week_hot{
		display:flex;
		justify-content:space-between;
		line-height:0.5rem;
		/*font-size:0.32rem;*/
		margin:0rem 0.08rem;
	}
	.left{
		font-size:0.16rem;
	}
	.left span{
		color:orangered;
	}
	.right{
		font-size:0.14rem;
		color:#aaa;
	}
	.current_week{
		overflow-x:scroll;
		white-space:nowrap;
	}
	.list{padding-left:0.1rem;display:inline-block;
			padding-bottom:0.12rem;}
	.list li{
		text-align:center;
		margin-right:0.05rem;
	}
	.list li img{
		width:1rem;
		height:1rem;
	}
	.list .price{color:#FF8300;}
	.list .price .content{color:#868686;}
	.youLike{height:0.44rem;line-height:0.44rem;font-size:0.16rem;
			margin:0 0.1rem;}
	.youLike span:nth-of-type(1){color:#FF5B58;}
	.likeContent{display:flex;border-bottom:1px solid #cacaca;
		padding-bottom:0.15rem;margin:0.1rem 0 0 0.1rem;}
	.likeContent .left img{width:1rem;height:1rem;}
	.likeContent .right{margin:0 0.1rem;flex:1;}
	.likeContent .right div:nth-of-type(1){
		margin-top:0.13rem;height:0.22rem;
		color:#212121;line-height:0.22rem;
		font-size:0.16rem;
	}
	.likeContent .right div:nth-of-type(2){margin:0.08rem 0rem;}
	.likeContent .right div:nth-of-type(2) .star{
		color:#ffb436;font-size:0.12rem;
	}
	.likeContent .right div:nth-of-type(2) .comment{
		margin:0 0.1rem;color:#616161;font-size:0.12rem;
	}
	.likeContent .right .box{display:flex;
		justify-content:space-between;margin:0.12rem 0rem;}
	.right .box p .span1 .symbol{font-size:0.08rem;}
	.right .box p .span1{
		color:#ff8300;font-size:0.2rem;
	}
	.right .box p .span2{color:#616161;}
	.right .box p:nth-of-type(2){color:#616161;}
	.likeContent .right div:nth-of-type(4){
		color:#f55;margin-top:0.3rem;font-size:0.12rem;
	}
</style>